<template>
  <div class="page luckdraw-coin">
    <div class="top-section">
      <p>我的总金币(个)</p>
      <div class="count">{{coinData.gold}}</div>
    </div>
    <div class="intro-list">
      <div class="item">
        <div class="item-box">
          <div class="value">{{coinData.gold_in}}</div>
          <div>今日收入金币</div>
        </div>
      </div>
      <div class="item">
        <div class="item-box">
          <div class="value">{{coinData.gold_in_sell}}</div>
          <div>交易中的金币</div>
        </div>
      </div>
    </div>
    <div class="group">
      <m-link title="金币明细" link="/pages/coin-history/main"></m-link>
      <m-link title="兑换金币" isLast link="/pages/convert-coin/main"></m-link>
    </div>
  </div>
</template>

<script>
import MLink from 'comp/m-link'
import mixins from 'comp/mixins'

export default {
  mixins: [mixins],
  components: {
    MLink
  },
  data () {
    return {
      coinData: {
        gold: 0,
        gold_in: 0,
        gold_in_sell: 0
      }
    }
  },
  onShow () {
    this.getCoinData()
  },
  methods: {
    async getCoinData () {
      const openId = await this.getOpenId()
      const ret = await this.$store.dispatch('queryPlayerStatistic', {
        playerid: openId
      })
      this.coinData = ret
    }
  }
}
</script>

<style lang="less" scoped>
.luckdraw-coin {
  .top-section {
    padding: 50rpx 0;
    text-align: center;
    background-color: #fff;
    p {
      font-size: 28rpx;
      color: #333;
    }
    .count {
      font-size: 60rpx;
      font-weight: bold;
      color: #e0382f;
      padding-top: 20rpx;
    }
  }
  .intro-list {
    display: flex;
    background-color: #fff;
    border-top: 1rpx solid #e6ebf0;
    .item {
      flex: 1;
      text-align: center;
      color: #777;
      font-size: 28rpx;
      padding: 40rpx 0;
      .value {
        color: #e0382f;
        font-size: 40rpx;
      }
      &:first-child .item-box {
        border-right: 1rpx solid #e6ebf0;
      }
    }
  }
  .group {
    margin-top: 20rpx;
  }
}
</style>
